<template>
  <view style="flex-direction: column;">
    <!-- <image src="'https://ykh.duduwangluo.cn/uploads/20220312/25a04ce7e71ef60a7c0bc4d69efa454b.png'" mode="widthFix" style="position: fixed;z-index: 2;width: 100vw;"> -->
    <!-- <image src="../../static/img/new/x8.png" mode="widthFix"
			style="position: fixed;z-index: 88;width: 81rpx;margin-left: 650rpx;"> -->
    <view class=""
      style="position: fixed;z-index: 3;width: 100vw;padding-top: 376rpx;background-image: url('https://bhsl.ascetic.top/uploads/20231002/268e486d864754931a457acb53a1bab6.png');background-size: 100%;min-height: 100vh;">
      <view class=""
        style="background-image: url('https://bhsl.ascetic.top/uploads/20231002/29deeef9fab828677a9a1d62987e9bba.png');background-size: 700rpx 700rpx;width: 700rpx;height: 700rpx;padding: 92rpx 40rpx 40rpx 40rpx;margin: 0 auto;">
        <LuckyWheel ref="luckyWheel" width="520rpx" height="520rpx" :blocks="blocks" :prizes="prizes" :buttons="buttons"
          :defaultStyle="defaultStyle" @start="startCallBack" @end="endCallBack" />
      </view>
      <!-- <view class="" style="display: flex;padding-top: 52rpx;">
					<image src="../../static/img/new/c1.png" mode="widthFix" style="width: 590rpx;margin: 0 auto;">
				</view> -->
      <view class="con1">
        <!-- @click="jump('/pages/user/wallet/score-balance')" -->
        <view class='u-reset-button obtn2'>{{data.tips}}</view>
        <!-- <view class="con_">
						<view class="c1" style="background: #6807A2;">
							内容
						</view>
						<view class="c2" v-for="item in list">
							{{item.title}}
						</view>
					</view>
					<view class="con_">
						<view class="c1" style="background: #6807A2;">
							状态
						</view>
						<view class="c2" v-for="item in list">
							{{item.desc}}
						</view>
					</view> -->
      </view>
    </view>
    <shopro-tabbar></shopro-tabbar>
    <!-- 登录提示 -->
    <shopro-auth-modal></shopro-auth-modal>
    <!-- 登录提示 -->
    <!-- <shopro-auth-modal v-if="authType"></shopro-auth-modal> -->
    <!-- 未抽到 -->
    <u-modal v-model="show" :content="content" @confirm="confirm"></u-modal>
    <!-- 抽到 -->
    <u-modal v-model="showQue" :content="contentQue" show-cancel-button="true" @confirm="confirmYi"></u-modal>
  </view>
</template>



<script>
  import share from '@/shopro/share';
  import {
    mapMutations,
    mapActions,
    mapState
  } from 'vuex';
  import LuckyWheel from '@lucky-canvas/uni/lucky-wheel' // 大转盘
  export default {
    components: {
      LuckyWheel
    },
    data() {
      return {
        detailJiang: null,
        show: false,
        showQue: false,
        content: '很遗憾您没有抽到~',
        contentQue: '是否去换购？',
        img: '',
        blocks: [{
          padding: '0px',
          background: '#d64737'
        }],
        list: [],
        prizes: [],
        prizes: [{
            fonts: [{
              text: '0',
              top: '10%'
            }],
            range: 100,
            background: '#e9e8fe'
          },
          {
            fonts: [{
              text: '1',
              top: '10%'
            }],
            range: 0,
            background: '#b8c5f2'
          }
        ],
        buttons: [{
            radius: '50px',
            background: '#d64737'
          },
          {
            radius: '45px',
            background: '#fff'
          },
          {
            radius: '41px',
            background: '#f6c66f',
            pointer: true
          },
          {
            radius: '35px',
            background: '#ffdea0',
            fonts: [{
              text: '开始\n抽奖',
              fontSize: '18px',
              top: -18
            }]
          }
        ],
        defaultStyle: {
          fontColor: '#d64737',
          fontSize: '14px'
        },
        detail: {},
        data: {},
      }
    },
    created() {},
    onLoad: function(op) {
      let that = this;
      // that.getUserInfo(op.token);
      that.$http('user.choujiang', {}).then(res => {
        if (res.code === 1) {
          if (res.data.prizes) {
            that.prizes = res.data.prizes;
          }
          if (res.data.buttons) {
            that.buttons = res.data.buttons;
          }
          if (res.data.blocks) {
            that.blocks = res.data.blocks;
          }
          if (res.data.defaultStyle) {
            that.defaultStyle = res.data.defaultStyle;
          }
          if (res.data.list) {
            that.list = res.data.list;
          }
          that.data = res.data;
        }
      });
    },
    onReachBottom() {
      // this.currentPage++
      // this.getList();
    },
    onNavigationBarSearchInputConfirmed: function(e) {
      this.tishi();
    },
    onReady() {
      // webView = plus.webview.currentWebview();
    },
    onNavigationBarButtonTap: function() {
      this.tishi();
    },
    onPullDownRefresh() {
      setTimeout(function() {
        uni.stopPullDownRefresh();
      }, 1000);
    },
    onShow() {
      console.log(share.setShareInfo())
    },
    computed: {
      ...mapState({
        userInfo: ({
          user
        }) => user.userInfo,
        isLogin: ({
          user
        }) => user.isLogin,
        authType: ({
          user
        }) => user.authType
      }),
    },
    methods: {
      ...mapActions(['getUserInfo']),
      // 一元换购 确定
      confirmYi() {
        console.log(this.detailJiang, 123456);
        uni.navigateTo({
          url: "/pages/user/card?formLucky=1&index=" + this.detailJiang.title
        })
      },
      // 没抽到
      confirm() {
        this.show = false
      },
      // 立即购买
      confirmBuy() {
        let that = this;
        that.confirmGoodsInfo = {
          goods_id: that.detail.id,
          choujiang: 1,
          goods_num: 1,
          sku_price_id: that.detail.sku_price[0].id,
          goods_price: that.detail.sku_price[0].price
        };
        console.log({
          goodsList: JSON.stringify([that.confirmGoodsInfo]),
          from: 'goods',
          is_ticket: that.detail.is_ticket,
          orderType: 'goods',
          grouponBuyType: 'alone',
          day: '',
          days: '',
          grouponId: 0
        })
        that.jump('/pages/order/confirm', {
          goodsList: JSON.stringify([that.confirmGoodsInfo]),
          from: 'goods',
          is_ticket: that.detail.is_ticket,
          orderType: 'goods',
          grouponBuyType: 'alone',
          day: '',
          days: '',
          change: 1,
          grouponId: 0
        });
      },
      // 点击抽奖按钮触发回调
      startCallBack() {
        let that = this;
        that.$http('user.getluckDraw', {}).then(res => {
          if (res.code === 1) {
            // 先开始旋转
            that.$refs.luckyWheel.play()
            // 使用定时器来模拟请求接口
            setTimeout(() => {
              that.$refs.luckyWheel.stop()
              // // 3s后得到中奖索引
              // let index = Math.random() * 6 >> 0
              // // 缓慢停止游戏
              // that.$refs.luckyWheel.stop(index)
            }, 3000)
          } else {
            that.$u.toast(res.msg);
          }
        });
      },
      // 抽奖结束触发回调
      endCallBack(prize) {
        this.detailJiang = prize
        // 奖品详情
        console.log(prize)
        console.log(prize.fonts[0])
        let that = this;
        if (prize.title == "") {
          that.show = true
        } else {
          that.showQue = true
        }
        that.$http('user.luckDraw', {
          ...prize,
          fonts: prize.fonts[0]
        }).then(res => {
          if (res.code == 2) {
            that.$u.toast(res.msg);
            that.detail = res.data
            setTimeout(function() {
              that.confirmBuy()
            }, 1500)
          } else {
            that.$u.toast(res.msg);
            that.$http('user.choujiang', {}).then(res => {
              if (res.data.prizes) {
                that.prizes = res.data.prizes;
              }
              if (res.data.buttons) {
                that.buttons = res.data.buttons;
              }
              if (res.data.blocks) {
                that.blocks = res.data.blocks;
              }
              if (res.data.defaultStyle) {
                that.defaultStyle = res.data.defaultStyle;
              }
              if (res.data.list) {
                that.list = res.data.list;
              }
            });
          }
        });
      },
      jump(path, parmas) {
        this.$Router.push({
          path: path,
          query: parmas
        });
      },
      go(row) {
        if (!this.isLogin) {
          this.$u.toast("请登录后操作~");
          return;
        }
        if (row.url) {
          this.jump(row.url)
        } else {
          this.$u.toast("新人任务已自动发放给您~");
        }
      },
      add(row) {
        let that = this;
        that.$http('user.add_task', {
          task_id: row.id
        }).then(res => {
          if (res.code === 1) {
            that.$u.toast(res.msg);
            that.data2 = [];
            that.currentPage = 1;
            that.loadStatus = 'more';
            that.getList();
          }
        });
      },
      getList() {
        let that = this;
        that.loadStatus = 'loading';
        that.$http('user.task_detail2', {
          task_id: this.id,
          wallet_type: 'energy',
          status: 0,
          page: that.currentPage
        }).then(res => {
          if (res.code === 1) {
            that.data2 = [...that.data2, ...res.data.data];
            that.lastPage = res.data.last_page;
            that.isEmpty = !that.data2.length;
            that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
          }
        });
      },
      tishi(row) {
        if (row.url) {
          uni.navigateTo({
            url: row.url
          })
          return;
        }
        uni.showToast({
          icon: 'none',
          title: '功能暂未开放！'
        });
      },
      intervalChange: function(e) {
        this.interval = e.detail.current;
        let th = this;
        console.log(th.topcolor);
      }
    }
  }
</script>
<style lang="scss">
  .con1 {
    justify-content: center;
  }

  .obtn2 {
    // width: 160rpx;
    margin-top: 60rpx;
    width: 100%;
    width: 590rpx;
    text-align: center;
    line-height: 80rpx;
    background: linear-gradient(90deg, #0099E5, #0099E5);
    box-shadow: 0px 7rpx 6rpx 0px rgba(0, 153, 229, 0.22);
    border-radius: 50rpx;
    margin-right: 20rpx;
    font-size: 26rpx;

    font-weight: 400;
    color: #fff;
    padding: 0;
  }

  .con1 {
    display: flex;
    width: 710rpx;
    margin: 0 auto;
    margin-top: 41rpx;

    .con_ {
      width: 50%;

      .c1 {
        height: 60rpx;
        line-height: 60rpx;
        background: #6807A2;
        text-align: center;
        color: #fff;
      }

      .c2 {
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        color: #fff;
        border: 1px solid #6807A2;
      }
    }
  }
</style>